<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>history</title>
</head>
<body>
	显示区域
	<div id="app"></div>
	<!-- 类似router.link -->
	<a href="javascript:void(0);" onclick="goHistory('/user')">去看user</a>
	<a href="javascript:void(0);" onclick="goHistory('/goods')">去看goods</a>

	<script type="text/javascript">
		function goHistory(url) {
			let text = '';

			//判断用户点击的是哪个按钮
			switch(url) {
				case '/user':
					text = '用户页面';
					break;
				case '/goods':
					text = '商品页面';
					break;
			}
			// 判断后做相应的url改变
			history.pushState({},'',url);
			// 改变页面效果
			document.getElementById('app').innerText= text;
		}

		// 当页面加载时
		window.onload = function() {
			let text2 = '';
			// 获取当前path路径
			var path = location.pathname;
			//判断用户点击的是哪个按钮
			switch(path) {
				case '/user':
					text2 = '用户页面';
					break;
				case '/goods':
					text2 = '商品页面';
					break;
			}
			document.getElementById('app').innerText= text2;
		}
	</script>
</body>
</html>